<!--  -->
<template>
  <div>
    <van-form @submit="changeFromData">
      <div class="font15 mt10 pl10">
        <span class="titletext ">{{ titledata.title }}</span>
        <div class="graytext  mt10 font13">
          <span>工单编号：</span>
          <span class="titletext">{{ titledata.pmInsId }}</span>
        </div>
      </div>
      <div class="mt10" style="display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item"></div>
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;flex:1;">项目基础信息</span>
      </div>
      <van-field readonly autosize type="textarea" rows="1" name="customerCode" :value="fromdata.customerCode" label="集团客户编码:" label-width="6.5em"/>
      <van-field readonly autosize type="textarea" rows="1" name="businessId" :value="fromdata.businessId" label="商机编码:" label-width="4.5em"/>
      <van-field readonly autosize type="textarea" rows="1" name="projectEstablishNumberNew" :value="fromdata.projectEstablishNumberNew" label="项目编码:" label-width="4.5em"/>
      <van-field readonly autosize type="textarea" rows="1" name="customerName" :value="fromdata.customerName" label="集团客户名称:" label-width="6.5em"/>
      <van-field readonly autosize type="textarea" rows="1" name="businessName" :value="fromdata.businessName" label="商机名称:" label-width="4.5em"/>
      <van-field readonly autosize type="textarea" rows="1" name="projectEstablishName" :value="fromdata.projectEstablishName" label="项目名称:" label-width="4.5em"/>
      <!-- 能力信息模块 -->
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item"></div>
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">打标基础信息</span>
      </div>
      <van-field readonly autosize type="textarea" rows="1" name="tagor" :value="fromdata.tagor" label="打标用户:" label-width="4.5em"/>
      <van-field readonly autosize type="textarea" rows="1" name="userRole" :value="fromdata.userRole" label="用户角色:" label-width="4.5em"/>
      <van-field readonly autosize type="textarea" rows="1" name="tagTime" :value="fromdata.tagTime" label="打标时间:" label-width="4.5em"/>
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item"></div>
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">融场景打标</span>
      </div>
      <el-table  :data="fromdata.processTagList" border style="width: 100%">
        <el-table-column prop="tagName" label="标签名称" width="120"/>
        <el-table-column prop="tagAttribute" label="标签属性" width="120"/>
        <el-table-column prop="hasKeyword" label="是否包含关键字" width="120"/>
        <el-table-column prop="processTaskType" label="打标环节" width="120"/>
        <el-table-column prop="isModified" label="是否可修改" width="120"/>
        <el-table-column prop="roleType" label="角色类型" width="120"/>
        <el-table-column prop="labelerRoles" label="可打标角色" width="200"/>
        <el-table-column prop="abilityOwnerName" label="能力主责人" width="120"/>
        <el-table-column prop="receiptCode" label="工单编号" width="120"/>
        <el-table-column prop="receiptTitle" label="工单标题" width="200"/>
        <el-table-column prop="currentState" label="审批状态" width="120"/>
      </el-table>
      <div v-if="!isdrawType" class="left_botton">
        <button block type="button" @click="tomsg()" style="color:#4A90E5; display: inline-block;width:100%;border: 0px solid #4A90E5;border-radius: 15px 0px 0px 15px;
            padding:10px 10px 10px 15px;font-size:13px">意见</button>
      </div>
      <div v-if="todotype || toread || isdrawType" class="footer">
        <van-button block type="info" native-type="submit" :disabled="canToNext == true ? false : true"
          style="display: inline-block;width:100%;border: 0px solid #4A90E5;">{{ toNextValue }}</van-button>
      </div>
    </van-form>
    <div v-if="showHistory" class="spline"></div>
    <van-field readonly center v-if="showHistory" label="当前办理人:" label-width="5.5em" />
    <div v-if="showHistory" class="font13 ptandpb10 pl16">
      <div>
        <span class="titletext font13">{{ historydata.MANAGER }}</span>
      </div>
      <div class="mt5">
        <span class="graytext font12 ">{{ historydata.DEPARTMENT }}</span>
      </div>
    </div>
    <div class="spline"></div>
    <div v-if="!isdrawType" style="padding-bottom: 42px">
      <div class="stitle font14" id='target'>审批意见</div>
      <div v-if="approveList.length > 0" class="swrap" style="width: 100%">
        <div class="spiece_flex" v-for="(item, index) in approveList" :key="index">
          <div class="vertical-a-t display-ib" style="width: 25px">
            <i v-if="index == 0" class="iconfont icon-current font16 color-red2"></i>
            <i v-if="index > 0" class="iconfont icon-yiban font16 color-theme"></i>
            <div v-if="index != (approveList.length - 1)" class="optionline"></div>
          </div>
          <div class="vertical-a-t display-ib" style="width: calc(100%)">
            <div style="white-space: nowrap">
              <span class="color-theme font14">{{ item.producerName || "暂无" }}：</span>
              <span class="color-2 font14">{{
      item.content || "暂无"
    }}</span>
            </div>
            <div class="mt05 color-8" style="display: flex; align-items: baseline">
              <div class="display-ib vertical-a-t font12" style="margin-top: 2px;width: 100%">
                {{ item.companyName + '-' + item.departmentName || "暂无" }}
              </div>
              <div class="display-ib vertical-a-t font12 text-r"
                style="margin-left: 10px; margin-top: 2px;text-align: right;width: 100%">
                {{ item.modifiedTime || "暂无" }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="color-9 font12 text-c">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
    getFormDetail, findSceneByPmIdNew,
    getWfLinkTracks,
    getWfOptMags
} from '@/api/dictapi';
import util from "@/assets/js/public";
import {  Notify, Toast } from 'vant';
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      titledata: {},
      fromdata: {},
      params: this.$route.query,
      todotype: false,
      approveList: [],
      showHistory: false,
      historydata: {},
      toread: false,
      toNextValue: '流程下一步',
      canToNext: true,
      showChengban: false,
      canEdit: false,
      isdrawType: false
    }
  },
  computed: {
    ...mapGetters(['user']),
    ...mapGetters(['userinfo'])
  },
  //生命周期--创建完成
  created() {
    if (this.params.todoType == '1') {
      this.todotype = true;
      if (this.params.location == 'dict.start') {
        this.canToNext=false
        this.toNextValue='暂不支持手机端，请至PC办理'
      } else {
        this.canToNext = true
        this.toNextValue = '流程下一步'
      }
    } else if (this.params.todoType == '2') {
      this.showHistory = true;
    } else if (this.params.todoType == '3') {
      this.toread = true;
    }
    this.getdetail();
  },
  //生命周期--挂载完成
  mounted() {

  },
  //方法调用
  methods: {
    tomsg() {
      document.getElementById('target').scrollIntoView({ behavior: 'smooth' })
    },
    getdetail() {
      Toast.loading({
        message: '加载中',
        forbidClick: false
      });
      getFormDetail(Object.assign(this.params, { userName: this.user.userName }))
        .then((result) => {
          this.fromdetal = {};
          Toast.clear();
          if (!result.data) {
            Notify(result.message);
            return;
          }
          if (result.data.data) {
            this.titledata = result.data.data;
            this.params.pmInsId = result.data.data.pmInsId;
            this.findSceneByPmIdNew();
          }
        })
    },
    findSceneByPmIdNew() {
      findSceneByPmIdNew(Object.assign(this.params, { userName: this.user.userName }))
        .then((result) => {
          this.fromdetal = {};
          Toast.clear();
          if (!result.data) {
            Notify(result.message);
            return;
          }
          if (result.data.data) {
            this.fromdata = result.data.data;
          }
          this.getWfOptMags();
        })
    },
    getWfOptMags() {
      getWfOptMags(Object.assign(this.params), { userName: this.user.userName })
        .then((result) => {
          Toast.clear();
          if (!result.data) {
            Notify(result.message);
            return;
          }
          this.approveList = result.data.data.reverse();
          if (this.showHistory == true) {
            this.getWfLinkTracks()
          }
        })
    },
    getWfLinkTracks() {
      getWfLinkTracks(Object.assign(this.params), { userName: this.user.userName })
        .then((result) => {
          Toast.clear();
          if (!result.data) {
            Notify(result.message);
            return;
          }
          if (result.data.data) {
            //数据过滤，并生成新的数组
            this.historydata = result.data.data.filter(item => item.CURRENTSTATE == 10)[0]
            if (this.historydata) {
              if (this.historydata.MANAGER) {
                this.showHistory = true;
              } else {
                this.showHistory = false;
              }
            } else {
              this.showHistory = false;
            }
          } else {
            this.showHistory = false;
          }
        })
    },
    changeFromData() {
      //提交流转
      var formSendData = { "htmlParamMap": {} };
      formSendData.htmlParamMap = this.fromdata;
      formSendData.id = this.titledata.id;
      formSendData.pmInsId = this.titledata.pmInsId;
      formSendData.processType = this.params.pmInsType
      formSendData.workItemId = this.params.workItemId;
      var params1 = {
        kv: {
          currentUserCode: util.encrypt(this.params.userName),
          source: 'MOBILE',
          location: this.params.location,
          processInstId: this.params.processInstId,
          processDefName: this.params.processDefName,
          processType: this.params.pmInsType,
          isClaimFun: '3',
          isClaimCounty: '3',
          isOperateCity: '3',
          isOperateCounties: '3',
          isProvinceConfirm: '3',
          isCityConfirm: '3'
        },
        body: {
          location: this.params.location,
          processInstId: this.params.processInstId,
          processDefName: this.params.processDefName,
        }
      };
      var params2 = {
        kv: {
          "currentUserCode": util.encrypt(this.params.userName),
          "source": 'MOBILE',
          "location": this.params.location,
          "processInstId": this.params.processInstId,
          'processType': this.params.pmInsType,
          'receiptCode': this.params.processInstId,
          'provinceSupport': this.fromdata.provinceSupport,
          'isOperateCity': '3',
          'isOperateCounties': '3',
        },
      };
      var params3 = {
        kv: {
          "source": 'MOBILE',
          "currentUserCode": util.encrypt(this.params.userName),
          "workItemId": this.params.todoType == 3 ? "" : this.params.workItemId,
          "processInstId": this.params.processInstId,
          "location": this.params.location,
          "notificationId": this.params.todoType == 3 ? this.params.wfnid : ""
        },
      };
      localStorage.setItem('submitPageParam', JSON.stringify({
        getDecisionsUrl: 'decisionAndUser$api$getDecisions',
        getDecisionsParams: params1,
        getUserUrl: 'decisionAndUser$api$getOrgAndUser',
        getUserParams: params2,
        tosubmintUrl: 'applicationFormEnhance$api$startSubmitProcess',
        tosubmintParams: params3,
        formData: formSendData,
        fromMoa: this.params.fromMoa,
        itemId:this.params.itemId,
        type: this.params.todoType == 3 ? "toRead" : "toDo"
      }));
      this.$router.push(
          {
            name: 'srqrsubmit'
          }
      );
    }
  }
}
</script>
<style scoped>
/* @import url();*/
</style>